FEBOOK

Appearance

Return to top
On this page

加餐-H5 可视化搭建项目如何在本地跑起来

Filmage 2021-11-08_180158.mp4

加餐：H5 可视化搭建项目如何在本地跑起来

本小册介绍的所有代码后面我们会部署到云端，这样就可以在线演示。但是这个可能需要花费一段时间，不过好在我们的代码会逐步完善，我们可以先通过本地模式来部署我们的可视化搭建体系。

因为本小册介绍的搭建需要依赖于发布系统才能做真正的演示，但是我也不可能再部署一个发布系统，所以为了方便大家查看 demo，笔者选择使用 Github Pages 作为我们的发布系统。将可视化搭建好的页面通过 Github Pages 的方式模拟发布。

准备工作

在开始安装之前，请确保你的本地已经安装好了以下工具：

  1. mysql 安装使用教程
  2. node 安装使用教程
  3. git 安装使用教程

然后我们打开本小册涉及到的所有代码空间coco-h5，然后分别 clone/fork 以下这些项目：

  • coco-web: 可视化编辑器
  • coco-server: 可视化编辑器后台服务，用于模板编译、发布、管理等操作
  • coco-template: 基于 coco 解耦后的模板
  • coco-cli: coco 脚手架项目，便捷生成模板、组件
  • coco-global-banner: coco 体系全局组件，可跨模板使用

创建 github organizations

小册当前所有项目代码都是存放在笔者自己的 github organizations 中，所以如果我们需要将源码在本地跑起来，需要搞一下自己的 organizations 不然可能会出现这样的错误：

image.png

创建 organizations 直接在 github 上选择好，然后按照提示一步步填写完成即可。

image.png

这里我的 organizations 的名字为 coco-h5。

紧接着，需要将 coco-template fork 到创建的 organizations 中。

coco-server 部署

server 端部署需要先创建一个数据库 coco：

shell
$ mysql -u root -p

// create database coco;

然后装一下依赖：

shell
$ cd coco-server & npm i

接着修改一下我们的数据库配置，可以根据本地 mysql 配置来调整：

javascript
module.exports = {
  sequelize: {
    dialect: 'mysql',
    host: '127.0.0.1',
    port: 3306,
    database: 'coco',
    username: 'root',
    password: 'root1234',
    logging: false
  }
};

最后:

shell
$ npm run dev

会自动创建 project、template 数据表。正常启动后，可以看到我们的服务启动 http://localhost:70001。

到这里，千万不要忘记修改 coco-server 中 org 信息，需要替换成刚才创建的 organizations:

javascript
// coco-server/app/service/project.js
class ProjectService extends Service {
  async createProject(config) {
    // coco-h5 替换成创建的 organizations name
    const {data: {id, ssh_url}} = await octokit.request('POST /orgs/coco-h5/repos', {
      org: 'coco-h5',
      name: config.name
    });
    // ...
  }
}

发布模板

然后我们需要创建一个模板，用于可视化编辑器选用。这里可以复用我已经建好的 coco-template 模板，然后 fork 到创建的 organizations 中。fork 完毕后，记得修改 coco-template 中的配置文件中的 gitUrl：

javascript
// coco-template/.coco.config.js
module.exports = {
  name: 'coco-template',
  templateName: '营销活动',
  author: 'muwoo',
  snapshot: 'https://cdn.img.snapshot.png',
  // 这里的 organizations 替换成刚才创建的 org
  gitUrl: 'coco-h5/coco-template',
  projectType: '0'
};

最后一步就是发布模板：

shell
$ cd coco-template && npm i
$ npm run release

然后我们可以看到经过编译后，代码被发布：

发布完成后，再启动一下预览服务，提供给可视化编辑器 iframe url 使用，注意现在模板服务暂时还没有部署，所以无法使用在线 url:

shell
$ npm run serve
// http://localhost:8081

运行可视化编辑器

最后我们需要对模板页面进行编辑，这里我们需要跑起来 coco-web 项目。

shell
$ cd coco-web && npm i
$ npm run serve

然后打开我们的页面 http://localhost:8080:

然后选择刚才发布的模板，输入相关信息：

最后就可以看到我们的编辑页了：

此时，由于我们的模板和页面是隔离的，所以可以看到我们的 github 上也会多出现一个项目：

这个项目就是我们创建的页面。正式环境部署后，预览链接就可以替换成：https://coco-h5.github.io/test-tpl/ 这个链接也是我们后面发布使用的链接。

然后我们可以愉快的编辑调试操作。

注意事项： 

  1. 预览编辑器是通过 `iframe` 的形式引入本地项目，所以确保你的模板服务已经开启：`http://localhost:8081`

  2. server 端创建页面依赖于 [github API](https://docs.github.com/en/rest/reference/repos#create-an-organization-repository) 所以我们需要替换一下自己的 `github token`：
javascript
// coco-server/app/service/project.js
const octokit = new Octokit({ auth: 'youapitoken' });